<template>
    <div class="store-container" v-loading="loading">
        <div class="header flex-box">
            <h4>店铺概况</h4>
        </div>
        <div v-if="list">
            <div class="store-con flex-box flex-box-display">
                <div class="store-box" v-for="order in orderList">
                    <div class="store-box__title">{{order.value ? order.value : '暂无数据'}}</div>
                    <div class="store-box__info">{{order.title}}</div>
                </div>
            </div>
            <div class="store-con">
                <draw-flow :message="list.flow_data"></draw-flow>
            </div>
        </div>

    </div>
</template>

<script>
    import DrawFlow from './DrawFlow'

    export default {
        components: {
            DrawFlow
        },
        data() {
            return {
                list: null,

                orderList: [{
                    title: '7日访客量', value: ''
                }, {
                    title: '7日下单量', value: ''
                }, {
                    title: '7日下单转化率', value: ''
                }, {
                    title: '在售商品', value: ''
                }],

                loading: true
            }
        },
        computed: {},
        mounted() {
            this.getConfigsData();
        },
        methods: {
            getConfigsData() {
                axios
                    .get('admin_configs')
                    .then(res => res.data.data)
                    .then(data => {
                        console.log('店铺配置', data);
                        this.list = data;
                        this.loading = false;
                    })
            },
        }
    }

</script>

<style scoped>
    .store-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-around;
    }

    .header {
        padding: 10px;
        background: #fff;
    }

    .store-con {
        height: auto;
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .store-box {
        text-align: center;
    }

    .store-box__title {
        color: #3F7DFF;
        font-size: 26px;
    }

    .store-box__info {
        font-size: 12px;
    }

    .dialog-con__img img {
        width: 160px;
        height: 160px;
        margin: 20px 50px;
    }
</style>
<style>

</style>